<template>
  <div class='app-container'>

    <div class="filter-container">
      <el-form  ref="queryForm" :model="formData" :inline="true"  v-loading="loading">
        <el-form-item label="用户ID" prop="userId">
          <el-input placeholder="用户ID" v-model="formData.userId"></el-input>
        </el-form-item>

        <el-form-item label="查询时间" prop="times">
          <el-date-picker
            type="daterange"
            v-model="times"
            @change="changeTime"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('queryForm')">查询</el-button>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="exportExcel()">导出Excel</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style='position: relative;'>
      <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
        <!-- <el-tab-pane label="未发放" name="1">
          <el-table :data="tableData1" style="width: 100%">
            <el-table-column prop="inviteUserNo" label="邀请人用户ID"></el-table-column>
            <el-table-column prop="beInviteUserNo" label="被邀请人用户ID"></el-table-column>
            <el-table-column prop="contributionFee" label="贡献的手续费">
              <template v-slot="scope">
                <span>{{ scope.row.contributionFee }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="returnCurrency" label="返佣的币种">
              <template v-slot="scope">
                <span>{{ scope.row.returnCurrency }} FEX</span>
              </template>
            </el-table-column>
            <el-table-column prop="returnRate" label="返佣的比例">
              <template v-slot="scope">
                <span>{{ scope.row.returnRate }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalReturnCommission" label="返佣的币种数量">
              <template v-slot="scope">
                <span>{{ scope.row.totalReturnCommission }} FEX</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="币种兑换时间">
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="pages1.total > 0" :total="pages1.total" :page.sync="pages1.pageNumber" :limit.sync="pages1.pageSize" @pagination="getList" />

        </el-tab-pane> -->
        <el-tab-pane label="已发放" name="2">
          <!-- 已发放 -->
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="inviteUserNo" label="邀请人用户ID"></el-table-column>
            <el-table-column prop="beInviteUserNo" label="被邀请人用户ID"></el-table-column>
            <el-table-column prop="contributionFee" label="贡献的手续费">
              <template v-slot="scope">
                <span>{{ scope.row.contributionFee }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="returnCurrency" label="返佣的币种">
              <template v-slot="scope">
                <span>{{ scope.row.returnCurrency }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="returnRate" label="返佣的比例">
              <template v-slot="scope">
                <span>{{ scope.row.returnRate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalReturnCommission" label="返佣的币种数量">
              <template v-slot="scope">
                <span>{{ scope.row.totalReturnCommission }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="endTimeStamp" label="发放时间">
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.endTimeStamp) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="pages2.total > 0" :total="pages2.total" :page.sync="pages2.pageNumber" :limit.sync="pages2.pageSize" @pagination="getList2" />
        </el-tab-pane>
      </el-tabs>

      <span style='position: absolute;right:200px;top:10px;'>已发放总数: </span>
      <el-button size='mini' @click="openDialog" style='position: absolute;right:10px;top:5px;'>人工发放-不用做</el-button>
    </div>


    <!-- 点击人工发放 -->
    <el-dialog title="人工发放" :visible.sync="dialogVisible" width="30%" >
      <el-form ref="form" :model="dialogForm" :rules="rules" label-width="140px">
        <el-form-item label="选择发放时间区间" prop="param1"><el-input v-model="dialogForm.param1"></el-input></el-form-item>
        <el-form-item label="需发放的金额" prop="param2"><el-input v-model="dialogForm.param2"></el-input></el-form-item>
        <el-form-item label="谷歌验证码" prop="param3"><el-input v-model="dialogForm.param3"></el-input></el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { findReturnCommission } from "@/api/activity/index"
  export default {
    data() {
      return {
        dialogVisible: false,
        tableData1: [],
        tableData2: [],
        loading:false,
        times: "",
        formData: {
          userId: "",
        },
        activeName: "2",
        dialogForm: {},
        pages1: {
          pageNumber: 1,
          pageSize: 20,
          total: 0
        },
        pages2: {
          pageNumber: 1,
          pageSize: 20,
          total: 0
        },
        rules:{
          param1: [{ required: true, message: '', trigger: 'blur' }],
          param2: [{ required: true, message: '', trigger: 'blur' }],
          param3: [{ required: true, message: '', trigger: 'blur' }],
        }
      };
    },
    mounted () {
      const item = JSON.parse(this.$route.query.item)
      // this.formData.userId = item.id
      this.getList()
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      changeTime(val) {
        if (val) {
          let start = val[0], end = val[1];
          this.formData.startTime = new Date(start).getTime()
          this.formData.endTime = new Date(end).getTime()
        } else {
          this.formData.startTime = ""
          this.formData.endTime = ""
          delete this.formData.startTime
          delete this.formData.endTime
        }
      },
      exportExcel() {

      },
      handleQuery(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getList()
          } else {
            return false;
          }
        });
      },
      getList() {
        const data = {
          ...this.formData,
          ...this.pages1,
          isReturn: this.activeName === "1" ? "N" : "Y"
        }

        findReturnCommission(data).then(res => {
          let list = res.result.list || []
          this["pages" + this.activeName].total = res.result.total
          this["tableData" + this.activeName] = list
        }).catch(err => {
        })
      },

      getList2() {
        const data = {
          ...this.formData,
          ...this.pages2,
          isReturn: this.activeName === "1" ? "N" : "Y"
        }

        findReturnCommission(data).then(res => {
          let list = res.result.list || []
          this["pages" + this.activeName].total = res.result.total
          this["tableData" + this.activeName] = list
        }).catch(err => {
        })
      },
      tabChange(val) {
        console.info('tabchange',val.name)
        this.getList()
      },
      openDialog(){
        this.dialogVisible =true;
        this.dialogForm ={}
      }
    }
  };

</script>

<style></style>
